<template>
  <div>
    <a-form-model
      :form="form"
      :rules="rules"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      style="max-width: 500px; margin: 40px auto 0"
    >
      <a-form-model-item label="标准类型" prop="type">
        <a-radio-group v-model="form.type">
          <a-radio value="1"> 点 </a-radio>
          <a-radio value="2"> 线 </a-radio>
          <a-radio value="3"> 面 </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="图层名称" prop="name">
        <a-input v-model="form.name" />
      </a-form-model-item>
      <a-form-model-item label="图层描述">
        <a-input v-model="form.desc" type="textarea" />
      </a-form-model-item>
      <a-form-model-item label="关联信息">
        <a-input v-model="form.resource" />
      </a-form-model-item>
    </a-form-model>
    <a-divider />
    <a-form-item :wrapperCol="{ span: 19, offset: 5 }">
      <a-button type="primary" @click="nextStep">下一步</a-button>
    </a-form-item>
  </div>
</template>

<script>
export default {
  name: 'Step1',
  data() {
    return {
      labelCol: { lg: { span: 5 }, sm: { span: 5 } },
      wrapperCol: { lg: { span: 19 }, sm: { span: 19 } },
      form: this.$form.createForm(this),
      rules: {
        name: [
          { required: true, message: 'Please input Activity name', trigger: 'blur' },
          { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
        ],
        type: [{ required: true, message: 'Please select at least one activity type', trigger: 'change' }]
      }
    }
  },
  methods: {
    nextStep() {
      const {
        form: { validateFields }
      } = this
      // 先校验，通过表单校验后，才进入下一步
      validateFields((err, values) => {
        if (!err) {
          this.$emit('nextStep')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.step-form-style-desc {
  padding: 0 56px;
  color: rgba(0, 0, 0, 0.45);

  h3 {
    margin: 0 0 12px;
    color: rgba(0, 0, 0, 0.45);
    font-size: 16px;
    line-height: 32px;
  }

  h4 {
    margin: 0 0 4px;
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
    line-height: 22px;
  }

  p {
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 22px;
  }
}
</style>
